<template>
    <!-- pagesb/activity/detail.wxml -->
    <view class="page_wrap">
        <swiper class="swiper_box" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
            <block v-for="(item, index) in banners" :key="index">
                <swiper-item :data-url="item">
                    <image class="swiper_img" :src="item"></image>
                </swiper-item>
            </block>
        </swiper>
        <view class="item_title">实力宠粉, 幸运盲盒活动详情</view>
        <view class="item_warp">
            <view class="text_price">
                <text>{{ goodsDetail.integration }}意豆</text>
                <text v-if="goodsDetail.originalPrice" class="text-through">¥{{ goodsDetail.originalPrice }}</text>
            </view>
            <view>已兑换：{{ goodsDetail.sale ? goodsDetail.sale : '0' }}{{ goodsDetail.unit ? goodsDetail.unit : '' }}</view>
        </view>
        <view class="item_title2">活动详情</view>
        <view class="item_warp2">
            <block v-for="(item, index) in detialimg" :key="index">
                <image class="detail_img" mode="widthFix" :src="item"></image>
            </block>
        </view>

        <view class="btn_next">
            <image class="detail_img" mode="widthFix" :src="btnimg" @tap="gotoNext"></image>
        </view>
        <view class="item_volume">
            <image v-if="isPlay == 0" src="/static/images/icon_volume.png" @tap="clickVolum" data-index="0"></image>
            <image v-else src="/static/images/icon_volume_no.png" @tap="clickVolum" data-index="1"></image>
        </view>
    </view>
</template>

<script>
// pagesb/activity/detail.js
const _request = require('../../utils/request.js');

const app = getApp(); // 引入app

var bgam = uni.createInnerAudioContext();
var palyed = 1;
export default {
    data() {
        return {
            indicatorDots: true,
            vertical: false,
            autoplay: true,
            interval: 5000,
            duration: 3000,
            banners: [
                'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/activityimage/top06.jpg?id=' + Math.random(),
                'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/activityimage/top01.jpg?id=' + Math.random(),
                'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/activityimage/top02.jpg?id=' + Math.random(),
                'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/activityimage/top03.jpg?id=' + Math.random(),
                'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/activityimage/top04.jpg?id=' + Math.random(),
                'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/activityimage/top05.jpg?id=' + Math.random()
            ],
            detialimg: ['https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/activityimage/detail01.jpg?id=' + Math.random()],
            btnimg: 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/activityimage/icon_order.png?id=' + Math.random(),
            goodsDetail: {
                integration: '',
                originalPrice: '',
                sale: false,
                unit: false
            },
            currentObj: {},
            yidou: 0,
            isPlay: 0
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        //获取商品详情
        _request
            .get(
                '/yidou/commodity/getcommodityinfo',
                {
                    id: '239060'
                },
                app.globalData.mallType
            )
            .then((res) => {
                if (res.data.code == 200) {
                    res.data.data?.skuStockList?.map((item) => {
                        item.sp1 = JSON.parse(item.sp1);
                    });
                    this.setData({
                        currentObj: res.data.data?.skuStockList[0],
                        goodsDetail: res.data.data || {}
                    });
                }
            })
            .catch((error) => {
                console.log(error, 'error');
            });

        this.getYodou();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        bgam.src = 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/activityimage/bgm.mp3';

        if (this.isPlay != 1) {
            bgam.play();
        }
    },
    // //控制音乐播放暂停的方法
    // music: function () {
    //   //判断palyed的初始值是多少(palyed初始值给的是1代表播放)
    //   if (palyed == 1) {
    //     //如果palyed等于一的话代表正在播放就用.push的方法暂停，然后再给palyed赋值为0代表音乐暂停
    //     bgam.pause()
    //     palyed = 0
    //   } else {
    //     //如果palyed不等于一的话代表音乐暂停就用.play的方法播放，然后再给palyed赋值为1代表音乐播放
    //     bgam.play()
    //     palyed = 1
    //   }
    // },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {
        bgam.pause();
    },
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {
        bgam.pause();
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        clickVolum(e) {
            if (e.target.dataset.index == 0) {
                this.setData({
                    isPlay: 1
                });
                bgam.pause();
            } else {
                this.setData({
                    isPlay: 0
                });
                bgam.play();
            }
        },

        gotoNext() {
            const { currentObj, goodsDetail, yidou } = this;

            if (!yidou) {
                this.getYodou();
                return;
            }

            if (yidou?.balance < currentObj?.integration) {
                uni.showToast({
                    title: '您的积分还不够哦~',
                    icon: 'none',
                    duration: 1500
                });
                return;
            } else {
                if (currentObj?.stock == 0) {
                    uni.showToast({
                        title: '该商品暂无库存,无法兑换！',
                        icon: 'none',
                        duration: 1500
                    });
                } else {
                    uni.navigateTo({
                        url:
                            '/pagesb/confirmorder/confirmorder?num=1' +
                            '&currentObj=' +
                            encodeURIComponent(JSON.stringify(currentObj)) +
                            '&goodsDetail=' +
                            encodeURIComponent(JSON.stringify(goodsDetail)) +
                            '&activity=' +
                            true
                    });
                }
            }
        },

        getYodou() {
            //获取意豆
            let userId = uni.getStorageSync('userId');

            _request
                .get('/wallet/getCoinInfo', {
                    id: userId,
                    userId
                })
                .then((res) => {
                    this.setData({
                        yidou: res.data.data
                    });
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        }
    }
};
</script>
<style>
/* pagesb/activity/detail.wxss */
.page_wrap {
    position: relative;
    background: #fbfbfb;
    height: 100vh;
    overflow-y: scroll;
}
.swiper_box {
    width: 100vw;
    height: 40vh;
}

.swiper_img {
    width: 100%;
    height: 100%;
}
.item_warp {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 24rpx;
    background: white;
}

.item_title {
    padding: 30rpx 20rpx;
    color: #333333;
    font-size: 36rpx;
    font-weight: bold;
    background: white;
}
.text_price {
    color: #ff1717;
}
.text_price .text-through {
    color: #666666;
    text-decoration: line-through;
    margin-left: 30rpx;
}
.item_title2 {
    color: #333333;
    padding: 24rpx;
    text-align: center;
    background: #fbfbfb;
}
.detail_img {
    width: 100%;
}
.btn_next {
    position: fixed;
    padding: 6% 18%;
    left: 32rpx;
    right: 32rpx;
    bottom: 0;
}

.item_volume {
    position: absolute;
    top: 28rpx;
    right: 28rpx;
}

.item_volume image {
    width: 64rpx;
    height: 64rpx;
}
</style>
